<template>
  <div id="app">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <router-view />
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
    name: 'App',
    computed: {
        ...mapGetters([
            'isMobile'
        ])
    },
    created () {
        console.log('App created - 检测移动设备中...');
        // 检测设备类型
        this.$store.dispatch('checkMobile').then(isMobile => {
            console.log('Device detection on app creation:', isMobile ? 'Mobile' : 'Desktop');

            // 如果是移动设备，设置默认路径为订单页面
            if (isMobile) {
                this.$store.commit('SET_DEFAULT_PATH', '/order/list');
            }
        });
    },
    mounted () {
        console.log('App mounted - 当前移动设备状态:', this.isMobile);
        // 添加窗口大小变化监听器
        window.addEventListener('resize', this.handleResize);
        // 初始检测
        this.handleResize();
        // 监听可见性变化
        document.addEventListener('visibilitychange', this.handleVisibilityChange);
    },
    beforeDestroy () {
    // 移除事件监听器
        window.removeEventListener('resize', this.handleResize);
        document.removeEventListener('visibilitychange', this.handleVisibilityChange);
    },
    methods: {
        handleResize () {
            // 当窗口大小变化时重新检测移动设备
            this.$store.dispatch('checkMobile').then(result => {
                console.log('窗口大小变化 - 移动设备检测结果:', result);
            });
        },
        handleVisibilityChange () {
            // 当页面可见性变化时重新检测移动设备
            if (document.visibilityState === 'visible') {
                this.$store.dispatch('checkMobile').then(result => {
                    console.log('页面可见性变化 - 移动设备检测结果:', result);
                });
            }
        }
    }
};
</script>

<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#app {
  height: 100%;
}

.scrollbar-wrapper {
  height: 100%;
  overflow-x: hidden !important;
}

.el-scrollbar__wrap {
  overflow-x: hidden !important;
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }

  .desktop-only {
    display: none !important;
  }
}

/* 桌面端样式 */
@media screen and (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }

  .desktop-only {
    display: block !important;
  }
}

.mobile-menu.visible {
  transform: translateX(0);
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1999;
  display: none;
}

.mobile-menu-overlay.visible {
  display: block;
}
</style>
